<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<meta name="generator" content="JsDoc Toolkit" />
		
		<title>JsDoc Reference - pv.Mark</title>

		<style type="text/css">
			/* default.css */
body
{
	font: 12px "Lucida Grande", Tahoma, Arial, Helvetica, sans-serif;
	width: 800px;
}

.header
{
	clear: both;
	background-color: #ccc;
	padding: 8px;
}

h1
{
	font-size: 150%;
	font-weight: bold;
	padding: 0;
	margin: 1em 0 0 .3em;
}

hr
{
	border: none 0;
	border-top: 1px solid #7F8FB1;
	height: 1px;
}

pre.code
{
	display: block;
	padding: 8px;
	border: 1px dashed #ccc;
}

#index
{
	margin-top: 24px;
	float: left;
	width: 160px;
	position: absolute;
	left: 8px;
	background-color: #F3F3F3;
	padding: 8px;
}

#content
{
	margin-left: 190px;
	width: 600px;
}

.classList
{
	list-style-type: none;
	padding: 0;
	margin: 0 0 0 8px;
	font-family: arial, sans-serif;
	font-size: 1em;
	overflow: auto;
}

.classList li
{
	padding: 0;
	margin: 0 0 8px 0;
}

.summaryTable { width: 100%; }

h1.classTitle
{
	font-size:170%;
	line-height:130%;
}

h2 { font-size: 110%; }
caption, div.sectionTitle
{
	background-color: #7F8FB1;
	color: #fff;
	font-size:130%;
	text-align: left;
	padding: 2px 6px 2px 6px;
	border: 1px #7F8FB1 solid;
}

div.sectionTitle { margin-bottom: 8px; }
.summaryTable thead { display: none; }

.summaryTable td
{
	vertical-align: top;
	padding: 4px;
	border-bottom: 1px #7F8FB1 solid;
	border-right: 1px #7F8FB1 solid;
}

/*col#summaryAttributes {}*/
.summaryTable td.attributes
{
	border-left: 1px #7F8FB1 solid;
	width: 140px;
	text-align: right;
}

td.attributes, .fixedFont
{
	line-height: 15px;
	color: #002EBE;
	font-family: "Courier New",Courier,monospace;
	font-size: 13px;
}

.summaryTable td.nameDescription
{
	text-align: left;
	font-size: 13px;
	line-height: 15px;
}

.summaryTable td.nameDescription, .description
{
	line-height: 15px;
	padding: 4px;
	padding-left: 4px;
}

.summaryTable { margin-bottom: 8px; }

ul.inheritsList
{
	list-style: square;
	margin-left: 20px;
	padding-left: 0;
}

.detailList {
	margin-left: 20px; 
	line-height: 15px;
}
.detailList dt { margin-left: 20px; }

.detailList .heading
{
	font-weight: bold;
	padding-bottom: 6px;
	margin-left: 0;
}

.light, td.attributes, .light a:link, .light a:visited
{
	color: #777;
	font-style: italic;
}

.fineprint
{
	text-align: right;
	font-size: 10px;
}
		</style>
	</head>

	<body>
<!-- ============================== header ================================= -->	
		<!-- begin static/header.html -->
		<div id="header">
</div>
		<!-- end static/header.html -->

<!-- ============================== classes index ============================ -->
		<div id="index">
			<!-- begin publish.classesIndex -->
			<div align="center"><a href="../index.html">Class Index</a>
| <a href="../files.html">File Index</a></div>
<hr />
<h2>Classes</h2>
<ul class="classList">
	
	<li><i><a href="../symbols/_global_.html">_global_</a></i></li>
	
	<li><a href="../symbols/Array.html">Array</a></li>
	
	<li><a href="../symbols/pv.html">pv</a></li>
	
	<li><a href="../symbols/pv.Anchor.html">pv.Anchor</a></li>
	
	<li><a href="../symbols/pv.Area.html">pv.Area</a></li>
	
	<li><a href="../symbols/pv.Bar.html">pv.Bar</a></li>
	
	<li><a href="../symbols/pv.Behavior.html">pv.Behavior</a></li>
	
	<li><a href="../symbols/pv.Behavior.drag.html">pv.Behavior.drag</a></li>
	
	<li><a href="../symbols/pv.Behavior.pan.html">pv.Behavior.pan</a></li>
	
	<li><a href="../symbols/pv.Behavior.point.html">pv.Behavior.point</a></li>
	
	<li><a href="../symbols/pv.Behavior.resize.html">pv.Behavior.resize</a></li>
	
	<li><a href="../symbols/pv.Behavior.select.html">pv.Behavior.select</a></li>
	
	<li><a href="../symbols/pv.Behavior.zoom.html">pv.Behavior.zoom</a></li>
	
	<li><a href="../symbols/pv.Color.html">pv.Color</a></li>
	
	<li><a href="../symbols/pv.Color.Hsl.html">pv.Color.Hsl</a></li>
	
	<li><a href="../symbols/pv.Color.Rgb.html">pv.Color.Rgb</a></li>
	
	<li><a href="../symbols/pv.Colors.html">pv.Colors</a></li>
	
	<li><a href="../symbols/pv.Constraint.html">pv.Constraint</a></li>
	
	<li><a href="../symbols/pv.Constraint.bound.html">pv.Constraint.bound</a></li>
	
	<li><a href="../symbols/pv.Constraint.collision.html">pv.Constraint.collision</a></li>
	
	<li><a href="../symbols/pv.Constraint.position.html">pv.Constraint.position</a></li>
	
	<li><a href="../symbols/pv.Dom.html">pv.Dom</a></li>
	
	<li><a href="../symbols/pv.Dom.Node.html">pv.Dom.Node</a></li>
	
	<li><a href="../symbols/pv.Dot.html">pv.Dot</a></li>
	
	<li><a href="../symbols/pv.Flatten.html">pv.Flatten</a></li>
	
	<li><a href="../symbols/pv.Force.html">pv.Force</a></li>
	
	<li><a href="../symbols/pv.Force.charge.html">pv.Force.charge</a></li>
	
	<li><a href="../symbols/pv.Force.drag.html">pv.Force.drag</a></li>
	
	<li><a href="../symbols/pv.Force.spring.html">pv.Force.spring</a></li>
	
	<li><a href="../symbols/pv.Format.html">pv.Format</a></li>
	
	<li><a href="../symbols/pv.Format.date.html">pv.Format.date</a></li>
	
	<li><a href="../symbols/pv.Format.number.html">pv.Format.number</a></li>
	
	<li><a href="../symbols/pv.Format.time.html">pv.Format.time</a></li>
	
	<li><a href="../symbols/pv.Geo.LatLng.html">pv.Geo.LatLng</a></li>
	
	<li><a href="../symbols/pv.Geo.Projection.html">pv.Geo.Projection</a></li>
	
	<li><a href="../symbols/pv.Geo.projections.html">pv.Geo.projections</a></li>
	
	<li><a href="../symbols/pv.Geo.scale.html">pv.Geo.scale</a></li>
	
	<li><a href="../symbols/pv.Geo.scale%23ticks.html">pv.Geo.scale#ticks</a></li>
	
	<li><a href="../symbols/pv.histogram.html">pv.histogram</a></li>
	
	<li><a href="../symbols/pv.histogram.Bin.html">pv.histogram.Bin</a></li>
	
	<li><a href="../symbols/pv.Image.html">pv.Image</a></li>
	
	<li><a href="../symbols/pv.Label.html">pv.Label</a></li>
	
	<li><a href="../symbols/pv.Layout.html">pv.Layout</a></li>
	
	<li><a href="../symbols/pv.Layout.Arc.html">pv.Layout.Arc</a></li>
	
	<li><a href="../symbols/pv.Layout.Bullet.html">pv.Layout.Bullet</a></li>
	
	<li><a href="../symbols/pv.Layout.Cluster.html">pv.Layout.Cluster</a></li>
	
	<li><a href="../symbols/pv.Layout.Cluster.Fill.html">pv.Layout.Cluster.Fill</a></li>
	
	<li><a href="../symbols/pv.Layout.Force.html">pv.Layout.Force</a></li>
	
	<li><a href="../symbols/pv.Layout.Grid.html">pv.Layout.Grid</a></li>
	
	<li><a href="../symbols/pv.Layout.Hierarchy.html">pv.Layout.Hierarchy</a></li>
	
	<li><a href="../symbols/pv.Layout.Horizon.html">pv.Layout.Horizon</a></li>
	
	<li><a href="../symbols/pv.Layout.Indent.html">pv.Layout.Indent</a></li>
	
	<li><a href="../symbols/pv.Layout.Matrix.html">pv.Layout.Matrix</a></li>
	
	<li><a href="../symbols/pv.Layout.Network.html">pv.Layout.Network</a></li>
	
	<li><a href="../symbols/pv.Layout.Network.Link.html">pv.Layout.Network.Link</a></li>
	
	<li><a href="../symbols/pv.Layout.Network.Node.html">pv.Layout.Network.Node</a></li>
	
	<li><a href="../symbols/pv.Layout.Pack.html">pv.Layout.Pack</a></li>
	
	<li><a href="../symbols/pv.Layout.Partition.html">pv.Layout.Partition</a></li>
	
	<li><a href="../symbols/pv.Layout.Partition.Fill.html">pv.Layout.Partition.Fill</a></li>
	
	<li><a href="../symbols/pv.Layout.Rollup.html">pv.Layout.Rollup</a></li>
	
	<li><a href="../symbols/pv.Layout.Stack.html">pv.Layout.Stack</a></li>
	
	<li><a href="../symbols/pv.Layout.Tree.html">pv.Layout.Tree</a></li>
	
	<li><a href="../symbols/pv.Layout.Treemap.html">pv.Layout.Treemap</a></li>
	
	<li><a href="../symbols/pv.Line.html">pv.Line</a></li>
	
	<li><a href="../symbols/pv.Mark.html">pv.Mark</a></li>
	
	<li><a href="../symbols/pv.Nest.html">pv.Nest</a></li>
	
	<li><a href="../symbols/pv.Panel.html">pv.Panel</a></li>
	
	<li><a href="../symbols/pv.Particle.html">pv.Particle</a></li>
	
	<li><a href="../symbols/pv.Quadtree.html">pv.Quadtree</a></li>
	
	<li><a href="../symbols/pv.Quadtree.Node.html">pv.Quadtree.Node</a></li>
	
	<li><a href="../symbols/pv.Rule.html">pv.Rule</a></li>
	
	<li><a href="../symbols/pv.Scale.html">pv.Scale</a></li>
	
	<li><a href="../symbols/pv.Scale.linear.html">pv.Scale.linear</a></li>
	
	<li><a href="../symbols/pv.Scale.log.html">pv.Scale.log</a></li>
	
	<li><a href="../symbols/pv.Scale.ordinal.html">pv.Scale.ordinal</a></li>
	
	<li><a href="../symbols/pv.Scale.quantile.html">pv.Scale.quantile</a></li>
	
	<li><a href="../symbols/pv.Scale.quantitative.html">pv.Scale.quantitative</a></li>
	
	<li><a href="../symbols/pv.Scale.root.html">pv.Scale.root</a></li>
	
	<li><a href="../symbols/pv.Simulation.html">pv.Simulation</a></li>
	
	<li><a href="../symbols/pv.Transform.html">pv.Transform</a></li>
	
	<li><a href="../symbols/pv.Tree.html">pv.Tree</a></li>
	
	<li><a href="../symbols/pv.Vector.html">pv.Vector</a></li>
	
	<li><a href="../symbols/pv.version.html">pv.version</a></li>
	
	<li><a href="../symbols/pv.Wedge.html">pv.Wedge</a></li>
	
</ul>
<hr />
			<!-- end publish.classesIndex -->
		</div>
		
		<div id="content">
<!-- ============================== class title ============================ -->
			<h1 class="classTitle">
				
				Class pv.Mark
			</h1>

<!-- ============================== class summary ========================== -->			
			<p class="description">
				
				
			
				Represents a data-driven graphical mark. The <tt>Mark</tt> class is
the base class for all graphical marks in Protovis; it does not provide any
specific rendering functionality, but together with Panel establishes
the core framework.

<p>Concrete mark types include familiar visual elements such as bars, lines
and labels. Although a bar mark may be used to construct a bar chart, marks
know nothing about charts; it is only through their specification and
composition that charts are produced. These building blocks permit many
combinatorial possibilities.

<p>Marks are associated with <b>data</b>: a mark is generated once per
associated datum, mapping the datum to visual <b>properties</b> such as
position and color. Thus, a single mark specification represents a set of
visual elements that share the same data and visual encoding. The type of
mark defines the names of properties and their meaning. A property may be
static, ignoring the associated datum and returning a constant; or, it may be
dynamic, derived from the associated datum or index. Such dynamic encodings
can be specified succinctly using anonymous functions. Special properties
called event handlers can be registered to add interactivity.

<p>Protovis uses <b>inheritance</b> to simplify the specification of related
marks: a new mark can be derived from an existing mark, inheriting its
properties. The new mark can then override properties to specify new
behavior, potentially in terms of the old behavior. In this way, the old mark
serves as the <b>prototype</b> for the new mark. Most mark types share the
same basic properties for consistency and to facilitate inheritance.

<p>The prioritization of redundant properties is as follows:<ol>

<li>If the <tt>width</tt> property is not specified (i.e., null), its value
is the width of the parent panel, minus this mark's left and right margins;
the left and right margins are zero if not specified.

<li>Otherwise, if the <tt>right</tt> margin is not specified, its value is
the width of the parent panel, minus this mark's width and left margin; the
left margin is zero if not specified.

<li>Otherwise, if the <tt>left</tt> property is not specified, its value is
the width of the parent panel, minus this mark's width and the right margin.

</ol>This prioritization is then duplicated for the <tt>height</tt>,
<tt>bottom</tt> and <tt>top</tt> properties, respectively.

<p>While most properties are <i>variable</i>, some mark types, such as lines
and areas, generate a single visual element rather than a distinct visual
element per datum. With these marks, some properties may be <b>fixed</b>.
Fixed properties can vary per mark, but not <i>per datum</i>! These
properties are evaluated solely for the first (0-index) datum, and typically
are specified as a constant. However, it is valid to use a function if the
property varies between panels or is dynamically generated.

<p>See also the <a href="../../api/">Protovis guide</a>.
				
				
					<br /><i>Defined in: </i> <a href="../symbols/src/src_mark_Mark.js.html">Mark.js</a>.
				
			</p>

<!-- ============================== constructor summary ==================== -->			
			
			<table class="summaryTable" cellspacing="0" summary="A summary of the constructor documented in the class pv.Mark.">
				<caption>Class Summary</caption>
				<thead>
					<tr>
						<th scope="col">Constructor Attributes</th>
						<th scope="col">Constructor Name and Description</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td class="attributes">&nbsp;</td>
						<td class="nameDescription" >
							<div class="fixedFont">
								<b><a href="../symbols/pv.Mark.html#constructor">pv.Mark</a></b>()
							</div>
							<div class="description">Constructs a new mark with default properties.</div>
						</td>
					</tr>
				</tbody>
			</table>
			

<!-- ============================== properties summary ===================== -->
			
				
				
				<table class="summaryTable" cellspacing="0" summary="A summary of the fields documented in the class pv.Mark.">
					<caption>Field Summary</caption>
					<thead>
						<tr>
							<th scope="col">Field Attributes</th>
							<th scope="col">Field Name and Description</th>
						</tr>
					</thead>
					<tbody>
					
						<tr>
							<td class="attributes">&nbsp;</td>
							<td class="nameDescription">
								<div class="fixedFont">
								<b><a href="../symbols/pv.Mark.html#bottom">bottom</a></b>
								</div>
								<div class="description">The bottom margin; the distance, in pixels, between the bottom edge of the
enclosing panel and the bottom edge of this mark.</div>
							</td>
						</tr>
					
						<tr>
							<td class="attributes">&nbsp;</td>
							<td class="nameDescription">
								<div class="fixedFont">
								<b><a href="../symbols/pv.Mark.html#childIndex">childIndex</a></b>
								</div>
								<div class="description">The child index.</div>
							</td>
						</tr>
					
						<tr>
							<td class="attributes">&nbsp;</td>
							<td class="nameDescription">
								<div class="fixedFont">
								<b><a href="../symbols/pv.Mark.html#cursor">cursor</a></b>
								</div>
								<div class="description">The cursor property; corresponds to the CSS cursor property.</div>
							</td>
						</tr>
					
						<tr>
							<td class="attributes">&nbsp;</td>
							<td class="nameDescription">
								<div class="fixedFont">
								<b><a href="../symbols/pv.Mark.html#data">data</a></b>
								</div>
								<div class="description">The data property; an array of objects.</div>
							</td>
						</tr>
					
						<tr>
							<td class="attributes">&nbsp;</td>
							<td class="nameDescription">
								<div class="fixedFont">
								<b><a href="../symbols/pv.Mark.html#defaults">defaults</a></b>
								</div>
								<div class="description">Default properties for all mark types.</div>
							</td>
						</tr>
					
						<tr>
							<td class="attributes">&nbsp;</td>
							<td class="nameDescription">
								<div class="fixedFont">
								<b><a href="../symbols/pv.Mark.html#events">events</a></b>
								</div>
								<div class="description">The events property; corresponds to the SVG pointer-events property,
specifying how the mark should participate in mouse events.</div>
							</td>
						</tr>
					
						<tr>
							<td class="attributes">&nbsp;</td>
							<td class="nameDescription">
								<div class="fixedFont">
								<b><a href="../symbols/pv.Mark.html#index">index</a></b>
								</div>
								<div class="description">The mark index.</div>
							</td>
						</tr>
					
						<tr>
							<td class="attributes">&nbsp;</td>
							<td class="nameDescription">
								<div class="fixedFont">
								<b><a href="../symbols/pv.Mark.html#left">left</a></b>
								</div>
								<div class="description">The left margin; the distance, in pixels, between the left edge of the
enclosing panel and the left edge of this mark.</div>
							</td>
						</tr>
					
						<tr>
							<td class="attributes">&nbsp;</td>
							<td class="nameDescription">
								<div class="fixedFont">
								<b><a href="../symbols/pv.Mark.html#parent">parent</a></b>
								</div>
								<div class="description">The enclosing parent panel.</div>
							</td>
						</tr>
					
						<tr>
							<td class="attributes">&nbsp;</td>
							<td class="nameDescription">
								<div class="fixedFont">
								<b><a href="../symbols/pv.Mark.html#proto">proto</a></b>
								</div>
								<div class="description">The mark prototype, possibly undefined, from which to inherit property
functions.</div>
							</td>
						</tr>
					
						<tr>
							<td class="attributes">&nbsp;</td>
							<td class="nameDescription">
								<div class="fixedFont">
								<b><a href="../symbols/pv.Mark.html#reverse">reverse</a></b>
								</div>
								<div class="description">The reverse property; a boolean determining whether marks are ordered from
front-to-back or back-to-front.</div>
							</td>
						</tr>
					
						<tr>
							<td class="attributes">&nbsp;</td>
							<td class="nameDescription">
								<div class="fixedFont">
								<b><a href="../symbols/pv.Mark.html#right">right</a></b>
								</div>
								<div class="description">The right margin; the distance, in pixels, between the right edge of the
enclosing panel and the right edge of this mark.</div>
							</td>
						</tr>
					
						<tr>
							<td class="attributes">&nbsp;</td>
							<td class="nameDescription">
								<div class="fixedFont">
								<b><a href="../symbols/pv.Mark.html#root">root</a></b>
								</div>
								<div class="description">The root parent panel.</div>
							</td>
						</tr>
					
						<tr>
							<td class="attributes">&nbsp;</td>
							<td class="nameDescription">
								<div class="fixedFont">
								<b><a href="../symbols/pv.Mark.html#scale">scale</a></b>
								</div>
								<div class="description">The current scale factor, based on any enclosing transforms.</div>
							</td>
						</tr>
					
						<tr>
							<td class="attributes">&nbsp;</td>
							<td class="nameDescription">
								<div class="fixedFont">
								<b><a href="../symbols/pv.Mark.html#title">title</a></b>
								</div>
								<div class="description">The title property; corresponds to the HTML/SVG title property, allowing the
general of simple plain text tooltips.</div>
							</td>
						</tr>
					
						<tr>
							<td class="attributes">&nbsp;</td>
							<td class="nameDescription">
								<div class="fixedFont">
								<b><a href="../symbols/pv.Mark.html#top">top</a></b>
								</div>
								<div class="description">The top margin; the distance, in pixels, between the top edge of the
enclosing panel and the top edge of this mark.</div>
							</td>
						</tr>
					
						<tr>
							<td class="attributes">&nbsp;</td>
							<td class="nameDescription">
								<div class="fixedFont">
								<b><a href="../symbols/pv.Mark.html#type">type</a></b>
								</div>
								<div class="description">The mark type; a lower camelCase name.</div>
							</td>
						</tr>
					
						<tr>
							<td class="attributes">&nbsp;</td>
							<td class="nameDescription">
								<div class="fixedFont">
								<b><a href="../symbols/pv.Mark.html#visible">visible</a></b>
								</div>
								<div class="description">The visible property; a boolean determining whether or not the mark instance
is visible.</div>
							</td>
						</tr>
					
					</tbody>
				</table>
				
				
				
			

<!-- ============================== methods summary ======================== -->
			
				
				
				<table class="summaryTable" cellspacing="0" summary="A summary of the methods documented in the class pv.Mark.">
					<caption>Method Summary</caption>
					<thead>
						<tr>
							<th scope="col">Method Attributes</th>
							<th scope="col">Method Name and Description</th>
						</tr>
					</thead>
					<tbody>
					
						<tr>
							<td class="attributes">&nbsp;</td>
							<td class="nameDescription">
								<div class="fixedFont"><b><a href="../symbols/pv.Mark.html#add">add</a></b>(type)
								</div>
								<div class="description">Adds a new mark of the specified type to the enclosing parent panel, whilst
simultaneously setting the prototype of the new mark to be this mark.</div>
							</td>
						</tr>
					
						<tr>
							<td class="attributes">&nbsp;</td>
							<td class="nameDescription">
								<div class="fixedFont"><b><a href="../symbols/pv.Mark.html#anchor">anchor</a></b>(name)
								</div>
								<div class="description">Returns an anchor with the specified name.</div>
							</td>
						</tr>
					
						<tr>
							<td class="attributes">&nbsp;</td>
							<td class="nameDescription">
								<div class="fixedFont"><b><a href="../symbols/pv.Mark.html#anchorTarget">anchorTarget</a></b>()
								</div>
								<div class="description">Returns the anchor target of this mark, if it is derived from an anchor;
otherwise returns null.</div>
							</td>
						</tr>
					
						<tr>
							<td class="attributes">&nbsp;</td>
							<td class="nameDescription">
								<div class="fixedFont"><b><a href="../symbols/pv.Mark.html#def">def</a></b>(name, v)
								</div>
								<div class="description">Defines a custom property on this mark.</div>
							</td>
						</tr>
					
						<tr>
							<td class="attributes">&nbsp;</td>
							<td class="nameDescription">
								<div class="fixedFont"><b><a href="../symbols/pv.Mark.html#event">event</a></b>(type, handler)
								</div>
								<div class="description">Registers an event handler for the specified event type with this mark.</div>
							</td>
						</tr>
					
						<tr>
							<td class="attributes">&nbsp;</td>
							<td class="nameDescription">
								<div class="fixedFont"><b><a href="../symbols/pv.Mark.html#extend">extend</a></b>(proto)
								</div>
								<div class="description">Sets the prototype of this mark to the specified mark.</div>
							</td>
						</tr>
					
						<tr>
							<td class="attributes">&nbsp;</td>
							<td class="nameDescription">
								<div class="fixedFont"><b><a href="../symbols/pv.Mark.html#margin">margin</a></b>(n)
								</div>
								<div class="description">Alias for setting the left, right, top and bottom properties simultaneously.</div>
							</td>
						</tr>
					
						<tr>
							<td class="attributes">&nbsp;</td>
							<td class="nameDescription">
								<div class="fixedFont"><b><a href="../symbols/pv.Mark.html#mouse">mouse</a></b>()
								</div>
								<div class="description">Returns the current location of the mouse (cursor) relative to this mark's
parent.</div>
							</td>
						</tr>
					
						<tr>
							<td class="attributes">&nbsp;</td>
							<td class="nameDescription">
								<div class="fixedFont"><b><a href="../symbols/pv.Mark.html#render">render</a></b>()
								</div>
								<div class="description">Renders this mark, including recursively rendering all child marks if this is
a panel.</div>
							</td>
						</tr>
					
					</tbody>
				</table>
				
				
				
			
<!-- ============================== events summary ======================== -->
			

<!-- ============================== constructor details ==================== -->		
			
			<div class="details"><a name="constructor"> </a>
				<div class="sectionTitle">
					Class Detail
				</div>
				
				<div class="fixedFont">
						<b>pv.Mark</b>()
				</div>
				
				<div class="description">
					Constructs a new mark with default properties. Marks, with the exception of
the root panel, are not typically constructed directly; instead, they are
added to a panel or an existing mark via <a href="../symbols/pv.Mark.html#add">pv.Mark#add</a>.
					
				</div>
				
				
				
				
					
					
					
					
					
					
					

			</div>
			

<!-- ============================== field details ========================== -->		
			
				<div class="sectionTitle">
					Field Detail
				</div>
				
					<a name="bottom"> </a>
					<div class="fixedFont">
					
					<span class="light">{number}</span>
					<b>bottom</b>
					
					</div>
					<div class="description">
						The bottom margin; the distance, in pixels, between the bottom edge of the
enclosing panel and the bottom edge of this mark. Note that in some cases
this property may be redundant with the top property, or with the conjunction
of top and height.
						
						
					</div>
					
					

						
						
						
						

					<hr />
				
					<a name="childIndex"> </a>
					<div class="fixedFont">
					
					<span class="light">{number}</span>
					<b>childIndex</b>
					
					</div>
					<div class="description">
						The child index. -1 if the enclosing parent panel is null; otherwise, the
zero-based index of this mark into the parent panel's <tt>children</tt> array.
						
						
					</div>
					
					

						
						
						
						

					<hr />
				
					<a name="cursor"> </a>
					<div class="fixedFont">
					
					<span class="light">{string}</span>
					<b>cursor</b>
					
					</div>
					<div class="description">
						The cursor property; corresponds to the CSS cursor property. This is
typically used in conjunction with event handlers to indicate interactivity.
						
						
					</div>
					
					

						
						
						
							<dl class="detailList">
							<dt class="heading">See:</dt>
							
							<dd><a href="http://www.w3.org/TR/CSS2/ui.html#propdef-cursor">CSS2 cursor</a></dd>
							
							</dl>
						
						

					<hr />
				
					<a name="data"> </a>
					<div class="fixedFont">
					
					<span class="light">{array}</span>
					<b>data</b>
					
					</div>
					<div class="description">
						The data property; an array of objects. The size of the array determines the
number of marks that will be instantiated; each element in the array will be
passed to property functions to compute the property values. Typically, the
data property is specified as a constant array, such as

<pre>m.data([1, 2, 3, 4, 5]);</pre>

However, it is perfectly acceptable to define the data property as a
function. This function might compute the data dynamically, allowing
different data to be used per enclosing panel. For instance, in the stacked
area graph example (see <a href="#scene">#scene</a>), the data function on the area mark
dereferences each series.
						
						
					</div>
					
					

						
						
						
						

					<hr />
				
					<a name="defaults"> </a>
					<div class="fixedFont">
					
					<span class="light">{<a href="../symbols/pv.Mark.html">pv.Mark</a>}</span>
					<b>defaults</b>
					
					</div>
					<div class="description">
						Default properties for all mark types. By default, the data array is the
parent data as a single-element array; if the data property is not specified,
this causes each mark to be instantiated as a singleton with the parents
datum. The visible property is true by default, and the reverse property is
false.
						
						
					</div>
					
					

						
						
						
						

					<hr />
				
					<a name="events"> </a>
					<div class="fixedFont">
					
					<span class="light">{string}</span>
					<b>events</b>
					
					</div>
					<div class="description">
						The events property; corresponds to the SVG pointer-events property,
specifying how the mark should participate in mouse events. The default value
is "painted". Supported values are:

<p>"painted": The given mark may receive events when the mouse is over a
"painted" area. The painted areas are the interior (i.e., fill) of the mark
if a 'fillStyle' is specified, and the perimeter (i.e., stroke) of the mark
if a 'strokeStyle' is specified.

<p>"all": The given mark may receive events when the mouse is over either the
interior (i.e., fill) or the perimeter (i.e., stroke) of the mark, regardless
of the specified fillStyle and strokeStyle.

<p>"none": The given mark may not receive events.
						
						
					</div>
					
					

						
						
						
						

					<hr />
				
					<a name="index"> </a>
					<div class="fixedFont">
					
					<span class="light">{number}</span>
					<b>index</b>
					
					</div>
					<div class="description">
						The mark index. The value of this field depends on which instance (i.e.,
which element of the data array) is currently being evaluated. During the
build phase, the index is incremented over each datum; when handling events,
the index is set to the instance that triggered the event.
						
						
					</div>
					
					

						
						
						
						

					<hr />
				
					<a name="left"> </a>
					<div class="fixedFont">
					
					<span class="light">{number}</span>
					<b>left</b>
					
					</div>
					<div class="description">
						The left margin; the distance, in pixels, between the left edge of the
enclosing panel and the left edge of this mark. Note that in some cases this
property may be redundant with the right property, or with the conjunction of
right and width.
						
						
					</div>
					
					

						
						
						
						

					<hr />
				
					<a name="parent"> </a>
					<div class="fixedFont">
					
					<span class="light">{<a href="../symbols/pv.Panel.html">pv.Panel</a>}</span>
					<b>parent</b>
					
					</div>
					<div class="description">
						The enclosing parent panel. The parent panel is generally undefined only for
the root panel; however, it is possible to create "offscreen" marks that are
used only for inheritance purposes.
						
						
					</div>
					
					

						
						
						
						

					<hr />
				
					<a name="proto"> </a>
					<div class="fixedFont">
					
					<span class="light">{<a href="../symbols/pv.Mark.html">pv.Mark</a>}</span>
					<b>proto</b>
					
					</div>
					<div class="description">
						The mark prototype, possibly undefined, from which to inherit property
functions. The mark prototype is not necessarily of the same type as this
mark. Any properties defined on this mark will override properties inherited
either from the prototype or from the type-specific defaults.
						
						
					</div>
					
					

						
						
						
						

					<hr />
				
					<a name="reverse"> </a>
					<div class="fixedFont">
					
					<span class="light">{boolean}</span>
					<b>reverse</b>
					
					</div>
					<div class="description">
						The reverse property; a boolean determining whether marks are ordered from
front-to-back or back-to-front. SVG does not support explicit z-ordering;
shapes are rendered in the order they appear. Thus, by default, marks are
rendered in data order. Setting the reverse property to false reverses the
order in which they are rendered; however, the properties are still evaluated
(i.e., built) in forward order.
						
						
					</div>
					
					

						
						
						
						

					<hr />
				
					<a name="right"> </a>
					<div class="fixedFont">
					
					<span class="light">{number}</span>
					<b>right</b>
					
					</div>
					<div class="description">
						The right margin; the distance, in pixels, between the right edge of the
enclosing panel and the right edge of this mark. Note that in some cases this
property may be redundant with the left property, or with the conjunction of
left and width.
						
						
					</div>
					
					

						
						
						
						

					<hr />
				
					<a name="root"> </a>
					<div class="fixedFont">
					
					<span class="light">{<a href="../symbols/pv.Panel.html">pv.Panel</a>}</span>
					<b>root</b>
					
					</div>
					<div class="description">
						The root parent panel. This may be undefined for "offscreen" marks that are
created for inheritance purposes only.
						
						
					</div>
					
					

						
						
						
						

					<hr />
				
					<a name="scale"> </a>
					<div class="fixedFont">
					
					<span class="light">{number}</span>
					<b>scale</b>
					
					</div>
					<div class="description">
						The current scale factor, based on any enclosing transforms. The current
scale can be used to create scale-independent graphics. For example, to
define a dot that has a radius of 10 irrespective of any zooming, say:

<pre>dot.radius(function() 10 / this.scale)</pre>

Note that the stroke width and font size are defined irrespective of scale
(i.e., in screen space) already. Also note that when a transform is applied
to a panel, the scale affects only the child marks, not the panel itself.
						
						
					</div>
					
					

						
						
						
							<dl class="detailList">
							<dt class="heading">See:</dt>
							
							<dd><a href="../symbols/pv.Panel.html#transform">pv.Panel#transform</a></dd>
							
							</dl>
						
						

					<hr />
				
					<a name="title"> </a>
					<div class="fixedFont">
					
					<span class="light">{string}</span>
					<b>title</b>
					
					</div>
					<div class="description">
						The title property; corresponds to the HTML/SVG title property, allowing the
general of simple plain text tooltips.
						
						
					</div>
					
					

						
						
						
						

					<hr />
				
					<a name="top"> </a>
					<div class="fixedFont">
					
					<span class="light">{number}</span>
					<b>top</b>
					
					</div>
					<div class="description">
						The top margin; the distance, in pixels, between the top edge of the
enclosing panel and the top edge of this mark. Note that in some cases this
property may be redundant with the bottom property, or with the conjunction
of bottom and height.
						
						
					</div>
					
					

						
						
						
						

					<hr />
				
					<a name="type"> </a>
					<div class="fixedFont">
					
					<span class="light">{string}</span>
					<b>type</b>
					
					</div>
					<div class="description">
						The mark type; a lower camelCase name. The type name controls rendering
behavior, and unless the rendering engine is extended, must be one of the
built-in concrete mark types: area, bar, dot, image, label, line, panel,
rule, or wedge.
						
						
					</div>
					
					

						
						
						
						

					<hr />
				
					<a name="visible"> </a>
					<div class="fixedFont">
					
					<span class="light">{boolean}</span>
					<b>visible</b>
					
					</div>
					<div class="description">
						The visible property; a boolean determining whether or not the mark instance
is visible. If a mark instance is not visible, its other properties will not
be evaluated. Similarly, for panels no child marks will be rendered.
						
						
					</div>
					
					

						
						
						
						

					
				
			

<!-- ============================== method details ========================= -->		
			
				<div class="sectionTitle">
					Method Detail
				</div>
				
					<a name="add"> </a>
					<div class="fixedFont">
					
					<span class="light">{<a href="../symbols/pv.Mark.html">pv.Mark</a>}</span>
					<b>add</b>(type)
					
					</div>
					<div class="description">
						Adds a new mark of the specified type to the enclosing parent panel, whilst
simultaneously setting the prototype of the new mark to be this mark.
						
						
					</div>
					
					
					
						
							<dl class="detailList">
							<dt class="heading">Parameters:</dt>
							
								<dt>
									<span class="light fixedFont">{function}</span> <b>type</b>
									
								</dt>
								<dd>the type of mark to add; a constructor, such as
<tt>pv.Bar</tt>.</dd>
							
							</dl>
						
						
						
						
						
							<dl class="detailList">
							<dt class="heading">Returns:</dt>
							
								<dd><span class="light fixedFont">{<a href="../symbols/pv.Mark.html">pv.Mark</a>}</span> the new mark.</dd>
							
							</dl>
						
						
						
							<dl class="detailList">
							<dt class="heading">See:</dt>
							
								<dd><a href="#extend">#extend</a></dd>
							
							</dl>
						

					<hr />
				
					<a name="anchor"> </a>
					<div class="fixedFont">
					
					<span class="light">{<a href="../symbols/pv.Anchor.html">pv.Anchor</a>}</span>
					<b>anchor</b>(name)
					
					</div>
					<div class="description">
						Returns an anchor with the specified name. All marks support the five
standard anchor names:<ul>

<li>top
<li>left
<li>center
<li>bottom
<li>right

</ul>In addition to positioning properties (left, right, top bottom), the
anchors support text rendering properties (text-align, text-baseline). Text is
rendered to appear inside the mark by default.

<p>To facilitate stacking, anchors are defined in terms of their opposite
edge. For example, the top anchor defines the bottom property, such that the
mark extends upwards; the bottom anchor instead defines the top property,
such that the mark extends downwards. See also <a href="../symbols/pv.Layout.Stack.html">pv.Layout.Stack</a>.

<p>While anchor names are typically constants, the anchor name is a true
property, which means you can specify a function to compute the anchor name
dynamically. See the <a href="../symbols/pv.Anchor.html#name">pv.Anchor#name</a> property for details.
						
						
					</div>
					
					
					
						
							<dl class="detailList">
							<dt class="heading">Parameters:</dt>
							
								<dt>
									<span class="light fixedFont">{string}</span> <b>name</b>
									
								</dt>
								<dd>the anchor name; either a string or a property function.</dd>
							
							</dl>
						
						
						
						
						
							<dl class="detailList">
							<dt class="heading">Returns:</dt>
							
								<dd><span class="light fixedFont">{<a href="../symbols/pv.Anchor.html">pv.Anchor</a>}</span> the new anchor.</dd>
							
							</dl>
						
						
						

					<hr />
				
					<a name="anchorTarget"> </a>
					<div class="fixedFont">
					
					<span class="light">{<a href="../symbols/pv.Mark.html">pv.Mark</a>}</span>
					<b>anchorTarget</b>()
					
					</div>
					<div class="description">
						Returns the anchor target of this mark, if it is derived from an anchor;
otherwise returns null. For example, if a label is derived from a bar anchor,

<pre>bar.anchor("top").add(pv.Label);</pre>

then property functions on the label can refer to the bar via the
<tt>anchorTarget</tt> method. This method is also useful for mark types
defining properties on custom anchors.
						
						
					</div>
					
					
					
						
						
						
						
						
							<dl class="detailList">
							<dt class="heading">Returns:</dt>
							
								<dd><span class="light fixedFont">{<a href="../symbols/pv.Mark.html">pv.Mark</a>}</span> the anchor target of this mark; possibly null.</dd>
							
							</dl>
						
						
						

					<hr />
				
					<a name="def"> </a>
					<div class="fixedFont">
					
					
					<b>def</b>(name, v)
					
					</div>
					<div class="description">
						Defines a custom property on this mark. Custom properties are currently
fixed, in that they are initialized once per mark set (i.e., per parent panel
instance). Custom properties can be used to store local state for the mark,
such as data needed by other properties (e.g., a custom scale) or interaction
state.

<p>WARNING We plan on changing this feature in a future release to define
standard properties, as opposed to <i>fixed</i> properties that behave
idiosyncratically within event handlers. Furthermore, we recommend storing
state in an external data structure, rather than tying it to the
visualization specification as with defs.
						
						
					</div>
					
					
					
						
							<dl class="detailList">
							<dt class="heading">Parameters:</dt>
							
								<dt>
									<span class="light fixedFont">{string}</span> <b>name</b>
									
								</dt>
								<dd>the name of the local variable.</dd>
							
								<dt>
									<span class="light fixedFont">{function}</span> <b>v</b>
									<i>Optional</i>
								</dt>
								<dd>an optional initializer; may be a constant or a
function.</dd>
							
							</dl>
						
						
						
						
						
						
						

					<hr />
				
					<a name="event"> </a>
					<div class="fixedFont">
					
					<span class="light">{<a href="../symbols/pv.Mark.html">pv.Mark</a>}</span>
					<b>event</b>(type, handler)
					
					</div>
					<div class="description">
						Registers an event handler for the specified event type with this mark. When
an event of the specified type is triggered, the specified handler will be
invoked. The handler is invoked in a similar method to property functions:
the context is <tt>this</tt> mark instance, and the arguments are the full
data stack. Event handlers can use property methods to manipulate the display
properties of the mark:

<pre>m.event("click", function() this.fillStyle("red"));</pre>

Alternatively, the external data can be manipulated and the visualization
redrawn:

<pre>m.event("click", function(d) {
    data = all.filter(function(k) k.name == d);
    vis.render();
  });</pre>

The return value of the event handler determines which mark gets re-rendered.
Use defs (<a href="#def">#def</a>) to set temporary state from event handlers.

<p>The complete set of event types is defined by SVG; see the reference
below. The set of supported event types is:<ul>

<li>click
<li>mousedown
<li>mouseup
<li>mouseover
<li>mousemove
<li>mouseout

</ul>Since Protovis does not specify any concept of focus, it does not
support key events; these should be handled outside the visualization using
standard JavaScript. In the future, support for interaction may be extended
to support additional event types, particularly those most relevant to
interactive visualization, such as selection.

<p>TODO In the current implementation, event handlers are not inherited from
prototype marks. They must be defined explicitly on each interactive mark. In
addition, only one event handler for a given event type can be defined; when
specifying multiple event handlers for the same type, only the last one will
be used.
						
						
					</div>
					
					
					
						
							<dl class="detailList">
							<dt class="heading">Parameters:</dt>
							
								<dt>
									<span class="light fixedFont">{string}</span> <b>type</b>
									
								</dt>
								<dd>the event type.</dd>
							
								<dt>
									<span class="light fixedFont">{function}</span> <b>handler</b>
									
								</dt>
								<dd>the event handler.</dd>
							
							</dl>
						
						
						
						
						
							<dl class="detailList">
							<dt class="heading">Returns:</dt>
							
								<dd><span class="light fixedFont">{<a href="../symbols/pv.Mark.html">pv.Mark</a>}</span> this.</dd>
							
							</dl>
						
						
						
							<dl class="detailList">
							<dt class="heading">See:</dt>
							
								<dd><a href="http://www.w3.org/TR/SVGTiny12/interact.html#SVGEvents">SVG events</a></dd>
							
							</dl>
						

					<hr />
				
					<a name="extend"> </a>
					<div class="fixedFont">
					
					<span class="light">{<a href="../symbols/pv.Mark.html">pv.Mark</a>}</span>
					<b>extend</b>(proto)
					
					</div>
					<div class="description">
						Sets the prototype of this mark to the specified mark. Any properties not
defined on this mark may be inherited from the specified prototype mark, or
its prototype, and so on. The prototype mark need not be the same type of
mark as this mark. (Note that for inheritance to be useful, properties with
the same name on different mark types should have equivalent meaning.)
						
						
					</div>
					
					
					
						
							<dl class="detailList">
							<dt class="heading">Parameters:</dt>
							
								<dt>
									<span class="light fixedFont">{<a href="../symbols/pv.Mark.html">pv.Mark</a>}</span> <b>proto</b>
									
								</dt>
								<dd>the new prototype.</dd>
							
							</dl>
						
						
						
						
						
							<dl class="detailList">
							<dt class="heading">Returns:</dt>
							
								<dd><span class="light fixedFont">{<a href="../symbols/pv.Mark.html">pv.Mark</a>}</span> this mark.</dd>
							
							</dl>
						
						
						
							<dl class="detailList">
							<dt class="heading">See:</dt>
							
								<dd><a href="#add">#add</a></dd>
							
							</dl>
						

					<hr />
				
					<a name="margin"> </a>
					<div class="fixedFont">
					
					<span class="light">{<a href="../symbols/pv.Mark.html">pv.Mark</a>}</span>
					<b>margin</b>(n)
					
					</div>
					<div class="description">
						Alias for setting the left, right, top and bottom properties simultaneously.
						
						
					</div>
					
					
					
						
							<dl class="detailList">
							<dt class="heading">Parameters:</dt>
							
								<dt>
									<b>n</b>
									
								</dt>
								<dd></dd>
							
							</dl>
						
						
						
						
						
							<dl class="detailList">
							<dt class="heading">Returns:</dt>
							
								<dd><span class="light fixedFont">{<a href="../symbols/pv.Mark.html">pv.Mark</a>}</span> this.</dd>
							
							</dl>
						
						
						
							<dl class="detailList">
							<dt class="heading">See:</dt>
							
								<dd><a href="#left">#left</a></dd>
							
								<dd><a href="#right">#right</a></dd>
							
								<dd><a href="#top">#top</a></dd>
							
								<dd><a href="#bottom">#bottom</a></dd>
							
							</dl>
						

					<hr />
				
					<a name="mouse"> </a>
					<div class="fixedFont">
					
					<span class="light">{<a href="../symbols/pv.Vector.html">pv.Vector</a>}</span>
					<b>mouse</b>()
					
					</div>
					<div class="description">
						Returns the current location of the mouse (cursor) relative to this mark's
parent. The <i>x</i> coordinate corresponds to the left margin, while the
<i>y</i> coordinate corresponds to the top margin.
						
						
					</div>
					
					
					
						
						
						
						
						
							<dl class="detailList">
							<dt class="heading">Returns:</dt>
							
								<dd><span class="light fixedFont">{<a href="../symbols/pv.Vector.html">pv.Vector</a>}</span> the mouse location.</dd>
							
							</dl>
						
						
						

					<hr />
				
					<a name="render"> </a>
					<div class="fixedFont">
					
					
					<b>render</b>()
					
					</div>
					<div class="description">
						Renders this mark, including recursively rendering all child marks if this is
a panel. This method finds all instances of this mark and renders them. This
method descends recursively to the level of the mark to be rendered, finding
all visible instances of the mark. After the marks are rendered, the scene
and index attributes are removed from the mark to restore them to a clean
state.

<p>If an enclosing panel has an index property set (as is the case inside in
an event handler), then only instances of this mark inside the given instance
of the panel will be rendered; otherwise, all visible instances of the mark
will be rendered.
						
						
					</div>
					
					
					
						
						
						
						
						
						
						

					
				
			
			
<!-- ============================== event details ========================= -->		
			
			
			<hr />
		</div>

		
<!-- ============================== footer ================================= -->
		<div class="fineprint" style="clear:both">
			
			Documentation generated by <a href="http://code.google.com/p/jsdoc-toolkit/" target="_blank">JsDoc Toolkit</a> 2.3.2 on Fri May 28 2010 10:13:29 GMT-0700 (PDT)
		</div>
	</body>
</html>
